<template>
	<view class="cate">



		<!-- 使用scroll-view包裹商品列表 -->
		<scroll-view class="floor-list" scroll-y="true" :lower-threshold="50" @scrolltolower="loadMore">
			<!-- 轮播图的区域 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, i) in swiperList" :key="i">
					<view @click="goBannerDetailVerify(item.firstPageTopJumpMsg)" class="swiper-item">
						<image :src="item.firstPageTopImgUrl" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="product_text">全部商品</view>
			
			
			<view v-for="(item, i) in floorList" :key="i" class="product-box">
				<view @click="goGoodsDetailVerify(item.id)">
					<image :src="item.productTopImg[0]" mode="heightFix" class="product_img"></image>
					<view class="product_name">{{item.productName}}</view>
					<view class="product_price">￥{{item.productPrice}}</view>
				</view>
			</view>
			<view v-if="isLoading" class="loading-animation"></view>
			<view v-if="!hasMore" class="no-more-data">没有更多数据了</view>
		</scroll-view>
	</view>
</template>



<script>
	import * as ProductApi from '@/api/product/product.js'
	import * as BannerApi from '@/api/banner/banner.js'

	export default {
		onLoad(options) {
			console.log(options)
			const paramsStr = options.params;
			const receivedParams = JSON.parse(paramsStr); // 将参数字符串解析为对象
			this.id=receivedParams.shopid
			console.log('舌诊报告传来的id')
			console.log(this.id)
		},
		data() {
			return {
				swiperList: [],
				floorList: [],
				pageNum: 1,
				pageSize: 6,
				hasMore: true,
				isLoading: false,
				isProcessing: false,
				id:null,
			};
		},
		onShow() {
			this.resetData();
			this.getSwiperList();
			this.getFloorList();

		},
		methods: {
			//数据重置
			resetData() {
				Object.assign(this.$data, this.$options.data.call(this));
			},
			async getSwiperList() {
				const {
					data: res
				} = await BannerApi.getBannerList();
				if (res.code !== 200) return uni.$showMsg();
				this.swiperList = res.data;
			},
			async getFloorList() {
				const {
					data: res
				} = await ProductApi.selectByPage(this.pageNum, this.pageSize);
				if (res.code !== 200) return uni.$showMsg();
				this.floorList = res.data.records;
				if (res.data.records.length < this.pageSize) {
					this.hasMore = false;
				}
			},
			async loadMore() {
				if (!this.hasMore || this.isLoading) return;
				this.isLoading = true;
				this.pageNum++;
				const {
					data: res
				} = await ProductApi.selectByPage(this.pageNum, this.pageSize);
				console.log("商城数据")
				console.log(res)
				this.isLoading = false;
				if (res.code !== 200) {
					this.hasMore = false;
					return uni.$showMsg();
				}
				this.floorList = [...this.floorList, ...res.data.records];
				if (res.data.records.length < this.pageSize) {
					this.hasMore = false;
				}
			},

			//兜底校验
			async goBannerDetailVerify(id) {
				const res = await ProductApi.selectById(id);
				if (res.data.code === 320 || res.data.code === 321) {
					uni.$toPage('/subpkg/shoppingMall/productChangeHint/productChangeHint')
				} else if (res.data.code === 200) {
					uni.$toPage('/subpkg/shoppingMall/goods_detail/goods_detail', {
						goods_id: id
					})
				}
			},
			//兜底校验
			async goGoodsDetailVerify(id) {
			    // 如果正在执行，则直接返回
			    if (this.isProcessing) return;
			
			    // 设置为正在执行
			    this.isProcessing = true;
			
			    try {
			        const res = await ProductApi.selectById(id);
			        if (res.data.code === 320 || res.data.code === 321) {
			            uni.$toPage('/subpkg/shoppingMall/productChangeHint/productChangeHint')
			        } else if (res.data.code === 200) {
			            uni.$toPage('/subpkg/shoppingMall/goods_detail/goods_detail', {
			                goods_id: id
			            })
			        }
			    } catch (error) {
			        // 可以处理错误
			    } finally {
			        // 执行完成后，重置锁状态
			        this.isProcessing = false;
			    }
			},




		}
	}
</script>




<style lang="scss" scoped>
	page {
		background-color: #f3f3f5;
		font-family: '思源黑体';
	}
	
	.cate{
		width: 100vw;
		padding: 0;
		margin: 0;
		overflow-y: scroll;
			swiper {
				left: 28rpx;
				top: 185.74rpx;
				width: 694rpx;
				height: 296rpx;
				margin: 28rpx auto;
		
				.swiper-item,
				image {
					overflow: hidden;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		
			.product_text {
				width: 128rpx;
				height: 46rpx;
				margin-left: 28rpx;
				margin-top: 56rpx;
				margin-bottom: 18rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 22.84px;
				color: rgba(0, 0, 0, 1);
				vertical-align: top;
			}
		
			.floor-list {
				height: 100vh;
				padding-bottom: 10px;
			}
		
			.product-box {
				box-sizing: border-box;
				margin-top: 20rpx;
				overflow: hidden;
				display: inline-block;
				width: 336rpx;
				height: 490rpx;
				margin-left: 28rpx;
				border-radius: 14rpx;
				background-color: rgba(255, 255, 255, 1);
			}
		
			.product_img {
				width: 336rpx;
				height: 336rpx;
			}
		
			.product_name,
			.product_price {
				margin-left: 20rpx;
				font-weight: 400;
			}
		
			.product_name {
				font-size: 28rpx;
				margin-top: 26rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		
			.product_price {
				font-size: 36rpx;
				margin-top: 14rpx;
				font-weight: 700;
				color: rgba(214, 30, 24, 1);
			}
		
			.no-more-data {
				text-align: center;
				color: #999;
				padding: 10px 0;
				font-size: 14px;
			}
		
			.loading-animation {
				border: 5rpx solid #f3f3f3;
				border-top: 5rpx solid rgba(223, 161, 60, 1);
				/* Blue border */
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				animation: spin 2s linear infinite;
				margin: 20rpx auto;
			}
		
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
		
				100% {
					transform: rotate(360deg);
				}
			}
		
	}
	.cate::-webkit-scrollbar {
        display: none;
    }
</style>